<template>
  <div class="img-container">
    <div class="top-button">
      <el-button
        icon="el-icon-plus"
        size="mini"
        type="success"
        @click="handlePrint"
      >打印</el-button>
      <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="handleDownload"
      >下载</el-button>
    </div>
    <div class="main-con">
      <div class="main-left">
        <LeftMain :titleData="titleData" :handleNode="handleNode"></LeftMain>
      </div>
      <div class="main-right">
        <rightImg
          :currentNum="currentNum"
          :imgUrl="imgUrl"
          :handleNum="handleNum"
          :loadImgUrl="loadImgUrl"
          v-loading="loading"
          @updateChecked="updateChecked"
        />
      </div>
    </div>
    <!-- 打印 -->
    <div id="print" v-show="false">
      <div
        class="print-wrap"
        v-for="(item,index) in printList"
        :key="index"
        style="width: 100vw;height: 100vh;display:flex;justify-content: center;align-items: center;"
      >
        <img
          :src="item"
          alt=""
          style="width: 500px;height: 500px"
        >
      </div>
    </div>
  </div>
</template>

<script>
import LeftMain from '@/views/system/img/components/LeftMain'
import rightImg from '@/views/system/img/components/rightImg'
import { getImgTree } from '@/api/system/img'
export default {
  name: 'imgIndex',
  components:{
    LeftMain,
    rightImg
  },
  data(){
    return {
      titleData: [{
        id:'01',
        label: '婚姻登记档案',
        children: [{
          id:'01001',
          label: '男方身份证',
        },{
          id:'01002',
          label: '女方身份证',
        },{
          id:'01003',
          label: '男方户口证明',
        }]
      }],//树形数据
      treeId:'01',
      pageNum:1,
      currentNum:1,//当前图片编号
      imgUrl:[
        {
          checked:false,
          url: 'https://img2.baidu.com/it/u=1664256608,1703044654&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
        }],//列表图片数组
      srcUrl:[
        {
          checked:false,
          url: 'https://img0.baidu.com/it/u=2410633936,3565527433&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
        },
        {
          checked:false,
          url: 'https://img1.baidu.com/it/u=3423986585,3483741342&fm=253&fmt=auto&app=138&f=JPEG?w=580&h=326'
        },
        {
          checked: false,
          url: 'https://img2.baidu.com/it/u=3982044681,3502761434&fm=26&fmt=auto'
        },
        {
          checked:false,
          url: 'https://img0.baidu.com/it/u=2410633936,3565527433&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
        },
        {
          checked:false,
          url: 'https://img1.baidu.com/it/u=3423986585,3483741342&fm=253&fmt=auto&app=138&f=JPEG?w=580&h=326'
        },
        {
          checked: false,
          url: 'https://img2.baidu.com/it/u=3982044681,3502761434&fm=26&fmt=auto'
        },
        {
          checked:false,
          url: 'https://img0.baidu.com/it/u=2410633936,3565527433&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
        },
        {
          checked:false,
          url: 'https://img1.baidu.com/it/u=3423986585,3483741342&fm=253&fmt=auto&app=138&f=JPEG?w=580&h=326'
        },
        {
          checked: false,
          url: 'https://img2.baidu.com/it/u=3982044681,3502761434&fm=26&fmt=auto'
        },
        {
          checked:false,
          url: 'https://img0.baidu.com/it/u=2410633936,3565527433&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
        },
        {
          checked:false,
          url: 'https://img1.baidu.com/it/u=3423986585,3483741342&fm=253&fmt=auto&app=138&f=JPEG?w=580&h=326'
        },
        {
          checked: false,
          url: 'https://img2.baidu.com/it/u=3982044681,3502761434&fm=26&fmt=auto'
        },
        {
          checked:false,
          url: 'https://img0.baidu.com/it/u=2410633936,3565527433&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
        },
        {
          checked:false,
          url: 'https://img1.baidu.com/it/u=3423986585,3483741342&fm=253&fmt=auto&app=138&f=JPEG?w=580&h=326'
        },
        {
          checked: false,
          url: 'https://img2.baidu.com/it/u=3982044681,3502761434&fm=26&fmt=auto'
        },
        {
          checked:false,
          url: 'https://img0.baidu.com/it/u=2410633936,3565527433&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
        },
        {
          checked:false,
          url: 'https://img1.baidu.com/it/u=3423986585,3483741342&fm=253&fmt=auto&app=138&f=JPEG?w=580&h=326'
        },
        {
          checked: false,
          url: 'https://img2.baidu.com/it/u=3982044681,3502761434&fm=26&fmt=auto'
        },
      ],
      printList:[],
      downloadList:[],
      printTimer:'',//定时器
      loading:false
    }
  },
  methods:{
    // 处理图片编号
    handleNum(index){
      this.currentNum = index + 1
    },
    // 点击打印
    handlePrint(){
      console.log(this.imgUrl);
      this.printList = []
      this.imgUrl.forEach(item => {
        if(item.checked){
          this.printList.push(item.url)
        }
      })
      if(this.printList.length === 0){
        return this.$message.error('请选择要打印的内容')
      }
      this.printTimer = setTimeout(()=> {
          const newStr = document.querySelector("#print").innerHTML
          document.body.innerHTML = newStr
          // 调用打印机
          document.execCommand("print")
      },800)
    },
    // 点击下载
    handleDownload(){
      this.downloadList = []
      this.imgUrl.forEach(item => {
        if(item.checked){
          this.downloadList.push(item.url)
        }
      })
    //  对接口
    },
    //  点击树形结构标题
    handleNode(obj){
      this.treeId = obj.id
      this.pageNum = 1
      this.currentNum = 1
      this.imgUrl.forEach(item => item.checked = false)
      if(obj.id === '01001'){
        this.imgUrl = [...this.imgUrl,...this.srcUrl]
      }else if(obj.id === '01002'){
        this.imgUrl = this.srcUrl
      }else if(obj.id === '01003'){
        this.imgUrl = [{
          url: 'https://img2.baidu.com/it/u=2927855153,1633263931&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
        }]
      }else{

      }
    },
    // 加载更多图片
    loadImgUrl(){
      console.log('我去加载图片了')
    },
    // 获取图片数据
    async getImgTreeData(){
      const sortNo = this.$route.query.sortNo
      const res = await getImgTree({sortNo})
      this.imgUrl = res.data
      this.imgUrl.forEach(item => {
        item.checked = false
        item.url = process.env.VUE_APP_BASE_API + item.url
      })
    },
    updateChecked(checkedImg) {
      for(let i in checkedImg) {
        this.imgUrl[i].checked = checkedImg[i];
      }
    }
  },
  mounted() {
    this.getImgTreeData()
  },
  beforeDestroy() {
    clearTimeout(this.printTimer)
  }
}
</script>

<style lang="scss" scoped>
.img-container{
  display: flex;
  flex-direction: column;
  padding: 20px;
  .top-button{
    height: 30px;
  }
  .main-con{
    display: flex;
    padding: 20px 0;
    .main-left{
      flex: 1;
    }
    .main-right{
      flex: 6;
    }
  }
}
</style>
